<template>
  <div class="index-detail-container">
    <div class="i-d-container-top">
      <div class="i-d-container-top_item" @click="handleAhpClick">
        <svg-icon icon-class="folder" width="14" height="14" />
        <div class="title-word">{{ $t("tool.evaluationAnalysis.ahp") }}</div>
      </div>
      <div class="i-d-container-top_item">
        <svg-icon icon-class="folder" width="14" height="14" />
        <div class="title-word">{{ $t("tool.evaluationAnalysis.exportIndex") }}</div>
      </div>
    </div>
    <div class="i-d-container-content">
      <div class="i-d-container-left">
        <div class="index-content">
          <jsmind ref="jsmind" :isReadOnly="false" :isZ="true" @endow="endow" @showParameter="showParameter"
            @updateZbtxData="updateZbtxData"></jsmind>
        </div>
        <div class="index-tips">
          <div class="index-tip">
            <el-tag>[Enter]</el-tag>
            <div>新增同级节点</div>
          </div>
          <div class="index-tip">
            <el-tag>[Ctrl+Enter]</el-tag>
            <div>新增子节点</div>
          </div>
          <div class="index-tip">
            <el-tag>[Delete]</el-tag>
            <div>删除节点</div>
          </div>
          <div class="index-tip">
            <el-tag>[Space]</el-tag>
            <div>展开收起节点</div>
          </div>
          <div class="index-tip">
            <el-tag>[左右上下]</el-tag>
            <div> 移动节点</div>
          </div>
          <div class="index-tip">
            <el-tag>[F2]</el-tag>
            <div> 编辑节点</div>
          </div>
          <div class="index-tip">
            <el-tag>[鼠标滚轮]</el-tag>
            <div>放大缩小</div>
          </div>
        </div>

      </div>
      <div class="i-d-container-right" id="index-attr">

        <div class="i-d-container-right__title">
          节点属性
        </div>

        <div class="i-d-container-right__content">
          <el-form label-position="top" style="width: 200px;" :model="nodeData.data">
            <el-form-item label="节点权重" v-if="showData.weight">
              <el-input disabled @keyup.native="onlyNumber" v-model="nodeData.data.weight"></el-input>
            </el-form-item>
            <el-form-item label="参数名称" v-if="showData.leaf">
              <el-input v-model="nodeData.data.parameter"></el-input>
            </el-form-item>
            <el-form-item label="归一化方法" v-if="showData.leaf">
              <el-input readonly v-model="nodeData.data.normalizationMethod" @focus="openGyhbtn"></el-input>
            </el-form-item>
          </el-form>
        </div>


      </div>
    </div>
    <!-- 归一化方法弹窗 -->
    <GyhDetail ref="GyhDetailRef" @submit="handleGyhSubmit"></GyhDetail>
    <!-- APH弹窗 -->
    <AhpDetail ref="AhpDetailRef"></AhpDetail>
  </div>
</template>

<script>
// import {
//   getZbtxData,
//   addZbtxData,
//   updateZbtxData,
//   verZbtxData,
//   download,
// } from "@/api/iep/iep";
import jsmind from "./jsmind.vue";
import GyhDetail from "./gyh-detail.vue";
import AhpDetail from "./ahp-detail.vue";
export default {
  name: "EvaluationIndexDetail",
  data() {
    return {
      // 图id
      mindId: "",
      // 自动上传锁
      updateLock: false,
      // 默认模板
      mindMode: `{"id":"root","topic":"${this.$route.query.indexName}","weight":1}`,
      // 默认数据
      jsmindData: {
        id: 29,
        indexContent: "{\"id\":\"root\",\"topic\":\"内部测试指标体系\",\"expanded\":true,\"weight\":1,\"ahp\":[[[1,1,2,3,3],[1,1,2,2,2],[0.5,0.5,1,2,2],[0.3333333333333333,0.5,0.5,1,1],[0.3333333333333333,0.5,0.5,1,1]]],\"children\":[{\"id\":\"1b6fcc038679bf34\",\"topic\":\"突防率\",\"expanded\":true,\"direction\":\"right\",\"parameter\":\"tfl\",\"normalizationMethod\":\"linearTransformationBenefitType\",\"normalizationParameter\":\"{\\\"a1\\\":\\\"1\\\",\\\"a2\\\":\\\"10\\\"}\",\"weight\":0.3206792845996795},{\"id\":\"1b6fdb404dc6623a\",\"topic\":\"命中率\",\"expanded\":true,\"direction\":\"right\",\"parameter\":\"mzl\",\"normalizationMethod\":\"linearTransformationBenefitType\",\"normalizationParameter\":\"{\\\"a1\\\":\\\"1\\\",\\\"a2\\\":\\\"10\\\"}\",\"weight\":0.27717886218469373},{\"id\":\"1b6fdcccd42c06df\",\"topic\":\"红方最早被探测逻辑时间\",\"expanded\":true,\"direction\":\"right\",\"normalizationMethod\":\"linearTransformationBenefitType\",\"normalizationParameter\":\"{\\\"a1\\\":\\\"1\\\",\\\"a2\\\":\\\"10\\\"}\",\"parameter\":\"hfbtc\",\"weight\":0.18208985350733306},{\"id\":\"1b6fe42bffea09ec\",\"topic\":\"平均被探测时长\",\"expanded\":true,\"direction\":\"right\",\"parameter\":\"pjbtc\",\"normalizationMethod\":\"linearTransformationBenefitType\",\"normalizationParameter\":\"{\\\"a1\\\":\\\"1\\\",\\\"a2\\\":\\\"10\\\"}\",\"weight\":0.11002599985414681},{\"id\":\"1b6fed691faa9ce8\",\"topic\":\"命中平均脱靶量\",\"expanded\":true,\"direction\":\"right\",\"parameter\":\"mzpj\",\"normalizationMethod\":\"linearTransformationBenefitType\",\"normalizationParameter\":\"{\\\"a1\\\":\\\"1\\\",\\\"a2\\\":\\\"10\\\"}\",\"weight\":0.11002599985414681}]}",
      },
      nodeData: {
        data: {
          weight: "",
          parameter: "",
          normalizationMethod: "",
        },
        id: "",
      },
      // 展示参数名称
      showData: {
        weight: true,
        leaf: true,
      },
    };
  },
  components: {
    jsmind,
    GyhDetail,
    AhpDetail
  },
  created() {
    // this.getZbtxData();

  },
  mounted(){
    this.mindId = this.jsmindData.id
    this.$refs["jsmind"].initJm(this.jsmindData.indexContent, false, true);
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == localStorage.getItem("conindsyPath")) {
      localStorage.removeItem("conindsyPath");
    }
    next();
  },
  methods: {
    // 获取数据,展示指标体系构建树
    getZbtxData() {
      const params = {
        indexId: this.$route.query.indexId,
      };
      getZbtxData(params).then((response) => {
        if (response.code == 200 && response.rows) {
          // 有数据展示，没数据显示一个根节点
          if (response.rows.length !== 0) {
            this.$nextTick(() => {
              this.mindId = response.rows[0].id;
              this.$refs["jsmind"].initJm(response.rows[0].indexContent, false);
            });
          } else {
            let addData = {
              indexId: this.$route.query.indexId,
              indexContent: this.mindMode,
            };
            // 没数据上传一个模板
            addZbtxData(addData).then((response) => {
              if (response.code == 200) {
                // 上传成功，获取数据
                this.getZbtxData();
              } else {
                this.$modal.msgError(response.msg);
              }
            });
          }
        } else {
          this.$modal.msgError(response.msg);
        }
      });
    },
    // 切换参数名称展示
    showParameter(showData) {
      this.showData = showData;
    },
    // 返回
    handleBack() {
      const path = localStorage.getItem("conindsyPath");
      this.$router.replace({ path: path });
    },
    // 赋值
    endow(data) {
      this.nodeData = data;
    },

    // 识别有操作就进行更新
    updateZbtxData(content) {
      if (this.updateLock === false) {
        let updata = {
          id: this.mindId,
          indexId: this.$route.query.indexId,
          indexContent: content,
        };
        this.updateLock = true;
        updateZbtxData(updata).then((response) => {
          if (response.code == 200) {
            console.log("自动保存成功");
            this.updateLock = false;
          } else {
            this.updateLock = false;
            this.$modal.msgError(response.msg);
          }
        });
      }
    },

    // 处理层次分析法弹窗
    handleAhpClick(){
      this.$refs["AhpDetailRef"].init(this.jsmindData);
    },
    // 打开归一化方法弹窗
    openGyhbtn() {
      if (this.nodeData.data.normalizationMethod !== undefined) {
        this.$nextTick(() => {
          this.$refs["GyhDetailRef"].init(this.nodeData.data);
        });
      } else {
        this.$nextTick(() => {
          this.$refs["GyhDetailRef"].init();
        });
      }
    },
    // 定义好的归一化算法加入结构体
    handleGyhSubmit(data) {
      this.nodeData.data.normalizationMethod = data.normalizationMethod;
      this.nodeData.data.normalizationParameter = data.normalizationParameter;
      this.$forceUpdate();
    },
    // 权重数字验证
    onlyNumber() {
      this.nodeData.data.weight = this.verifyNumber(this.nodeData.data.weight);
    },
    // 数字验证方法
    verifyNumber(number_only) {
      //先把非数字的都替换掉，除了数字和小数点
      number_only = number_only.replace(/[^\d.]/g, "");
      //必须保证第一个为数字而不是小数点
      number_only = number_only.replace(/^\./g, "");
      //保证只有出现一个小数点而没有多个小数点
      number_only = number_only.replace(/\.{2,}/g, ".");
      //保证小数点只出现一次，而不能出现两次以上
      number_only = number_only
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      return number_only;
    },
    // 验证权重【新层次分析法】
    verifyWeight() {
      // let params = {
      //   id: this.mindId,
      // };
      // verZbtxData(params).then((response) => {
      //   if (response.code == 200) {
      //     this.$modal.msgSuccess("权重验证成功");
      //   } else {
      //     this.$modal.msgError(response.msg);
      //   }
      // });
      this.$router.push({
        path: "/iep/construction-indicator-system/ahp-detail",
        query: {
          indexId: this.$route.query.indexId,
          indexName: this.$route.query.indexName,
        },
      });
    },
    // 导出指标树
    exportTree() {
      this.download(
        `pe/index/content/exportIndexFile?id=${this.mindId}`,
        {},
        `${this.$route.query.indexName}.xlsx`
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.index-detail-container {
  width: 100%;
  height: 100%;

  .i-d-container-top {
    height: 35px;
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid var(--ui-border-color-base);

    .i-d-container-top_item {
      display: flex;
      margin-right: 20px;
      align-items: center;
      font-size: var(--ui-font-size-base);
      cursor: pointer;

      .title-word {
        margin-left: 5px;
      }
    }
  }

  .i-d-container-content {
    display: flex;
    height: calc(100% - 35px);
    width: 100%;

    .i-d-container-left {
      width: calc(100% - 300px);

      .index-content {
        height: calc(100% - 50px);
        width: 100%;
        border-bottom: 1px solid var(--ui-border-color-base);
      }

      .index-tips {
        height: 50px;
        width: 100%;
        color: var(--app-text-fg-low);
        font-size: var(--ui-font-size-base);
        display: flex;
        justify-content: center;
        align-items: center;

        .index-tip {
          display: flex;
          align-items: center;
          margin-left: 10px;
        }


      }
    }

    .i-d-container-right {
      border-left: 1px solid var(--ui-border-color-base);
      width: 300px;
      height: 100%;

      .i-d-container-right__title {
        height: 35px;
        display: flex;
        color: var(--app-text-fg-low);
        font-size: var(--ui-font-size-title);
        font-weight: var(--ui-font-weight-base);
        justify-content: center;
        border-bottom: 1px solid var(--ui-border-color-base);

      }

      .i-d-container-right__content {
        height: calc(100% - 35px);
        display: flex;
        justify-content: center;
        padding-top: 10px;

      }
    }


  }
}
</style>